<template>
  <div class="wrap">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>手动备份数据</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <el-form label-position="top" :model="manualForm" :rules="manualFormRules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="备份目录" prop="directory">
              <el-input v-model="manualForm.directory"></el-input>
            </el-form-item>
            <el-form-item label="文件名前缀" prop="prefix">
              <el-input v-model="manualForm.prefix"></el-input>
              <p class="tip">1.文件名前缀(例):MCloud(最多为30字数)</p>
              <p class="tip">2.文件全名(例):Mcloud_bak_yyyyMMddHHmmss.sql</p>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="float: right; margin-bottom:15px">确定</el-button>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>周期备份数据</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <el-form label-position="top" :model="autoForm" :rules="autoFormRules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="周期设置(天)" prop="period">
              <el-input v-model="autoForm.period"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="float: right; margin-bottom:15px">确定</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        autoForm: {
          period: '',
        },
        autoFormRules: {
          period: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ]
        },
        manualForm: {
          directory: '',
          prefix: '',
        },
        manualFormRules: {
          directory: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ]
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tip{
    margin: 0;
    font-size: 12px;
    line-height: 20px;
  }
  .el-input{
    // width: 30%;
    // min-width: 200px;
  }
</style>
